/* eslint-disable no-unused-vars */
import React, { memo, useState } from "react";
import { Input } from "antd";
import IconFont from "@/components/IconFont";
import config from "@/layouts/config";

function DraggableControl({ type }) {
  // 根据控件类型渲染不同的表单控件
  let control;
  switch (type) {
    case "input":
      control = (
        <div
          className="centerl"
          style={{ gap: 6, fontSize: 12, paddingLeft: 4 }}
        >
          <IconFont type="icon-danhangwenben"></IconFont>
          <span className="mt4">{config[type].deftitle}</span>
        </div>
      );
      break;
    case "digit":
      control = <input type="number" />;
      break;
    case "checkbox":
      control = <input type="checkbox" />;
      break;
    default:
      control = null;
  }

  return (
    <div
      className="centerl"
      style={{
        opacity: 0.5,
        cursor: "grab",
        padding: 6,
        border: "1px solid #ccc",
        borderRadius: "4px",
        width: 114,
        height: 34,
      }}
    >
      {control}
    </div>
  );
}

export default memo(DraggableControl);
